import React from 'react';
import { connect } from 'dva';
import styles from './UserModal.css';
import { Form, Modal, Input, DatePicker, Button } from 'antd';
import moment from 'moment';

const FormItem = Form.Item;

function UserModal({ dispatch, form, modal }) {

    const IS_EDITING = modal.action=='edit';
    const modalTitle = (IS_EDITING ? '修改' : '新增') + '会员资料';

    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 2 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };

    function okHandler() {
        form.validateFields((err, fieldsValue) => {
            if (err) {
              return;
            }
            const user = fieldsValue;
            const id = user.id;
            delete user.id;
            user['reg_time'] = user['reg_time'].format('YYYY-MM-DD HH:mm:ss');

            if (modal.action == 'edit') {
                dispatch({ type: 'users/patch', payload: { id: id, values: user } });
            } else {
                dispatch({ type: 'users/create', payload: { values: user } });
            }
        });
    }

    function cancelHandler() {
        dispatch({ type: 'users/hideModal' });
    }

    return (
        <Modal
            title={modalTitle}
            visible={modal.visible}
            onOk={okHandler}
            onCancel={cancelHandler}
            okText='确认'
            cancelText='取消'>

            <Form className="ant-advanced-search-form">

                { IS_EDITING && <FormItem {...formItemLayout} label="会员ID">
                {getFieldDecorator('id')(
                    <Input disabled/>
                )}
                </FormItem> }
                <FormItem {...formItemLayout} label="手机">
                {getFieldDecorator('mobile', {
                    validateTrigger: 'onBlur',
                    rules: [{
                        required: true,
                        pattern: /^1\d{10}$/,
                        message: '请输入正确的手机号码'
                    }]
                })(
                  <Input placeholder="请输入手机号码" maxLength="11"/>
                )}
                </FormItem>
                <FormItem {...formItemLayout} label="姓名">
                {getFieldDecorator('name', {
                    validateTrigger: 'onBlur',
                    rules: [{
                        required: true,
                        max: 20,
                        message: '请输入姓名，最多20字'
                    }]
                })(
                    <Input placeholder="请输入姓名" maxLength="20"/>
                )}
                </FormItem>
                <FormItem {...formItemLayout} label="车牌号">
                {getFieldDecorator('license', {
                    validateTrigger: 'onBlur',
                    rules: [{
                        required: true,
                        pattern: /^[\u4e00-\u9fa5]{1}[a-hj-zA-HJ-Z]{1}[a-hj-zA-HJ-Z_0-9]{4}[a-hj-zA-HJ-Z_0-9_\u4e00-\u9fa5]$/,
                        message: '请输入正确的车牌号'
                    }]
                })(
                  <Input placeholder="请输入车牌号" maxLength="7"/>
                )}
                </FormItem>
                <FormItem {...formItemLayout} label="停车点">
                {getFieldDecorator('address', {
                    validateTrigger: 'onBlur',
                    rules: [{
                        required: true,
                        max: 100,
                        message: '请输入停车点地址，最多100字'
                    }]
                })(
                  <Input placeholder="停车点" maxLength="100"/>
                )}
                </FormItem>
                <FormItem {...formItemLayout} label="注册时间">
                {getFieldDecorator('reg_time', { 
                    initialValue: moment(),
                    rules: [{
                        required: true,
                        message: '请选择注册时间'
                    }]
                })(
                  <DatePicker />
                )}
                </FormItem>
            </Form>
        </Modal>
    );
}

function mapStateToProps(state) {
  const { modal, user } = state.users;
  return {
    modal,
    user
  };
}

const UserModalForm = Form.create({

    mapPropsToFields({ user }) {
        const fields = {}

        user instanceof Object &&
        Object.keys(user).forEach((key) => { 
            let value = (key == 'reg_time') ? moment(user[key]) : user[key];
            fields[key] = { value: value };
        });

        return fields;
    }

})(UserModal);

export default connect(mapStateToProps)(UserModalForm);
